<template>
    <div class="voluteerActivity">
        <VHeader title='我参与的活动' />
        <div class="search-wrap">
            <!--<van-search placeholder="" v-model="searchValue" show-action>
                <div slot='action' class='search'>搜索</div>
            </van-search>-->
        </div>
        
        <div class="list-wrap">
            <van-list
                    v-if="list.length > 0"
                    v-model="listLoadingFlag"
                    :finished="listLoadingFinished"
                    finished-text="没有更多了"
                    @load="getData"
                    :immediate-check='false'
            >
                <div v-for="(el,index) in list" :key="index">
                    <activityItem :activityData='el'/>
                </div>
            </van-list>
            <div v-else class="flex flex-center flex-align-center no-more">
                <div>
                    <img src="../../../static/img/no_data.png" width="150" />
                    <p style="text-align: center">没有更多数据</p>
                </div>
            </div>
        </div>
    
    </div>
</template>

<script>
    import activityItem from '../voluteerActivity/activityItem'
    export default {
        data() {
            return {
                listLoadingFlag:false,
                listLoadingFinished:false,
                loadingFlag:true,
                searchValue:'',
                pageSize:10,
                page:1,
                list:[]
                
            }
        },
        components:{
            activityItem,
        },
        created() {
            this.getData()
        },
        methods: {
            listLoadingOnLoad(){
            
            },
            async getData(flag){
                if(!this.loadingFlag){return}
                this.listLoadingFlag = false;
                this.loadingFlag=false
                let res=await this.$http({
                    method:'api.activity.getJoinList',
                    page:this.page++,
                    pageSize:this.pageSize,
                })
                this.list=flag?res.data.list:[...res.data.list,...this.list]
                this.listLoadingFinished=(res.data.list.length<this.pageSize)
                this.loadingFlag=true
            },
            changeTabs(){
                this.page=1;
                this.getData(true)
            }
        },
    }
</script>

<style lang='scss' scoped >
    .search{color: #F65D5D;}
    .search-wrap{margin:.5rem 0;}
    .list-wrap{padding: 0 .4rem}
    .voluteerActivity{padding-bottom: 50px;}
</style>